<template>
  <div>
    <div v-if="isNull">
      <div class="page" :style="backgroundDiv">
        <h2>暂 无 数 据</h2>
      </div>
    </div>
    <div class="all_page">
      <el-card class="box-card" v-if="!isNull">
        <template #header>
          <div class="card-header">
            <div class="page1">
              <div class="left">
                <h1>收集总份数</h1>
                <h1>{{ count }}</h1>
              </div>
              <div class="left">
                <h1>用户的平均填写时长</h1>
                <h1>{{ time }}</h1>
              </div>
            </div>
          </div>
        </template>
        <div class="line">
          <liner :detail="detail"></liner>
        </div>
      </el-card>
      <!-- <div v-if="!isNull">
        <div class="page">
          <div class="left">
            <h1>收集总份数</h1>
            <h1>{{ count }}</h1>
          </div>
          <div class="left">
            <h1>用户的平均填写时长</h1>
            <h1>{{ time }}</h1>
          </div>
        </div>
        <div class="line">
          <liner :detail="detail"></liner>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import Liner from "@/components/Analysis/charts/line";
import axios from "axios";
export default {
  components: { Liner },
  props: {
    id: Number,
  },
  created() {
    axios
      .post("statistic/", { qid: this.id })
      // .get("http://api.tianapi.com/txapi/ncov/index", {"key":'dfea6e45e4b42824644108bfaabf1e6a',"domain":'baidu.com'})
      .then((res) => {
        // eslint-disable-line no-unused-vars
        // debugger;
        if (res.data.code === 0 || res.data.code === 3) {
          console.log(res.data.statistics.time_histogram);
          this.detail = res.data.statistics.time_histogram;
          this.count = res.data.statistics.total;
          this.time = res.data.statistics.avg_time;
          console.log(this.detail);
        } else if (res.data.code === 2) {
          console.log(this.isNull);
          this.isNull = true;
        }
      });
  },
  data() {
    return {
      detail: null,
      count: "",
      time: "",
      isNull: false,
      saveData: {
        percentage: 50,
      },
      backgroundDiv: {
        backgroundImage: "url(" + require("@/assets/yx.png") + ")",
      },
      // answer
    };
  },
};
</script>

<style scoped>
.all_page {
  border-radius: 8px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin: 0 auto;
  /* width: 1200px; */
  /* height: 1000px; */
  /* background: #f8f7f7; */
}
h2 {
  width: 350px;
  margin-left: 220px;
  height: 50px;
  align-items: center;
}
.page1 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}
.line {
  display: flex;
  flex-flow: row nowrap;
  /* margin-left: 200px; */
}
/* .page1 {
  border-radius: 8px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin: 0 auto;
  width: 1200px;
  height: 500px;
  align-items: center;
  background: no-repeat center top;
  background-size: contain;
} */
.left {
  width: 30%;
  text-align: center;
}
</style>
